<!DOCTYPE html>
<html class="dark" lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name=viewport
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>首页</title>
    <script type="text/javascript" src="/ajax/libs/ol-6.9.0/ol.js"></script>
    <script type="text/javascript" src="/ajax/libs/sm-11.1.0/iclient-ol.min.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.10.4.min.js"></script>
    <script type="text/javascript" src="/ajax/libs/report/sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="/ajax/libs/layui-v2.8.4/layui.js"></script>
    <link href="/ajax/libs/ol-6.9.0/ol.css" rel="stylesheet"/>
    <link href='/ajax/libs/sm-11.1.0/iclient-ol.min.css' rel='stylesheet'/>
    <link rel="stylesheet" href="/ajax/libs/layui-v2.8.4/css/layui.css">
    <link rel="stylesheet" href="/ajax/libs/layui-v2.8.4/css/layui-theme-dark.css">
    <link rel="stylesheet" href="/css/map/my-common.css">
    <link rel="stylesheet" href="/css/map/map.css">
    <link rel="stylesheet" href="/css/map/topnav.css">
    <link rel="stylesheet" href="/css/map/leftnav.css">
    <link rel="stylesheet" href="/css/map/switch.css">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/ajax/libs/xgplayer/3.0.1/dist/index.min.css">
    <!--    <link rel="stylesheet" href="//unpkg.byted-static.com/xgplayer/3.0.1/dist/index.min.css">-->
</head>

<body>
<div id="map"></div>
<div class="head">
    <div class="title">[[${sysName}]]</div>
    <div class="top-nav">
        <ul class="navbar">
            <li>
                <a class="user-info">
                    <img class="profile" src="/img/user.jpg" alt="">
                    <span class="username">[[${username}]]</span>
                </a>
                <ul class="dropdown-menu" style="display: none;">
                    <!--                    <li><a href="javascript: window.open('/admin');"><i class="fa fa-user"></i>后台管理</a></li>-->
                    <li><a href="/admin"><i class="fa fa-user"></i>后台管理</a></li>
                    <li>
                        <a href="javascript:" onclick="showFull()">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                            全屏显示
                        </a>
                    </li>
                    <li><a href="/logout"><i class="fa fa-sign-out"></i>退出登录</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="left-nav">
    <div class="search">
        <input name="search" autocomplete="off"/>
        <i class="fa fa-search"></i>
    </div>
    <ul id="nav">
        <!--        <li data-index="1" class="">-->
        <!--            <a href="javascript:;">-->
        <!--                <div class="light light-green"></div>-->
        <!--                <cite>艇1</cite>-->
        <!--                <i class="fa fa-angle-left"></i>-->
        <!--            </a>-->
        <!--            <ul class="sub-menu">-->
        <!--                <li>-->
        <!--                    <a _href="/device">-->
        <!--                        <div class="light light-green"></div>-->
        <!--                        <cite>设备</cite>-->
        <!--                    </a>-->
        <!--                </li>-->
        <!--                <li>-->
        <!--                    <a _href="/device">-->
        <!--                        <div class="light light-green"></div>-->
        <!--                        <cite>设备</cite>-->
        <!--                    </a>-->
        <!--                </li>-->
        <!--            </ul>-->
        <!--        </li>-->
    </ul>
    <div class="time" id="clock"></div>
    <div class="date"></div>
</div>
<div class="right container" style="display: none">
    <div class="row">
        <div class="title">
            <i class="fa fa-dashboard"></i>
            <span>艇xx状态信息</span>
        </div>
        <div class="close" onclick="hideRightDiv(null, true)">
            <svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" class="ojlTaq_K" viewBox="0 0 36 36">
                <path d="M22.133 23.776a1.342 1.342 0 101.898-1.898l-4.112-4.113 4.112-4.112a1.342 1.342 0 00-1.898-1.898l-4.112 4.112-4.113-4.112a1.342 1.342 0 10-1.898 1.898l4.113 4.112-4.113 4.113a1.342 1.342 0 001.898 1.898l4.113-4.113 4.112 4.113z"
                      fill="#aaa"></path>
            </svg>
        </div>
    </div>
    <div class="content">
        <div class="row data-time">
            数据时间：
            <span id="data-time" style="margin-right: 10px">-</span>
            流水号：
            <span id="serial-num" style="width: 40px;">-</span>
        </div>
        <div class="charts">
            <div class="row" style="margin-top: -20px">
<!--                <div id="speed"></div>-->
                <div id="headingUp"></div>
                <div id="pitchDown"></div>
            </div>
            <!--            <div class="row" style="margin-top: -35px; display: none">-->
            <!--                <div id="headingDown"></div>-->
            <!--                <div id="pitchDown"></div>-->
            <!--            </div>-->
            <div class="row" style=" margin-top: -15px;">
                <div id="headingDown"></div>
                <div id="pitchUp"></div>
            </div>
            <div class="row" style=" margin-top: -15px">
                <div id="rollUp"></div>
                <div id="rudderAngle" style="display: none"></div>
            </div>

        </div>
        <div class="values" id="value-panel">
            <div class="row">
                <div class="value">
                    <div class="label">经&#12288;&#12288;度</div>
                    <div class="line" id="lng"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
                <div class="value">
                    <div class="label">纬&#12288;&#12288;度</div>
                    <div class="line" id="lat"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
            </div>
            <div class="row">
                <div class="value">
                    <div class="label">航&#12288;&#12288;速</div>
                    <div class="line" id="speed"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
                <div class="value">
                    <div class="label">电池电压</div>
                    <div class="line" id="capacitor"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
            </div>
            <div class="row">
                <div class="value">
                    <div class="label">水面旋转</div>
                    <div class="line" id="rotationUp"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
                <div class="value">
                    <div class="label">水下旋转</div>
                    <div class="line" id="rotationDown"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
            </div>

            <div class="row">
                <div class="value">
                    <div class="label">水下受力</div>
                    <div class="line" id="pressure"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>

                <div class="value">
                    <div class="label">跑偏半径</div>
                    <div class="line" id="radius"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
            </div>
            <div class="row">
                <div class="value">
                    <div class="label">电机转速</div>
                    <div class="line" id="engine"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
                <div class="value">
                    <div class="label">通信模式</div>
                    <div class="line" id="db-mode"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
            </div>
            <div class="row" style="display: none">
                <div class="value">
                    <div class="label">24小时通信成功率</div>
                    <div class="line" id="msg-rate"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
                <div class="value">
                    <div class="label">24小时跑偏统计</div>
                    <div class="line" id="stay-rate"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text"></div>
                </div>
            </div>
            <div class="row">
                <div class="value">
                    <div class="label">报&#12288;&#12288;警</div>
                    <div class="line" id="alert"
                         style="margin: 0; text-align: right; letter-spacing: 1px; user-select: text">
                        <div class="light" style="float: right; margin-top: 5px;"></div>
                    </div>
                </div>
                <div class="value">

                </div>
            </div>
            <!--            <div class="row">-->
            <!--                <div class="value">-->
            <!--                    <div class="label">电压1</div>-->
            <!--                    <div class="line" id="voltage1"></div>-->
            <!--                    <div class="val">3V</div>-->
            <!--                </div>-->
            <!--                <div class="value">-->
            <!--                    <div class="label">电压2</div>-->
            <!--                    <div class="line" id="voltage2"></div>-->
            <!--                    <div class="val">3V</div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="row">-->
            <!--                <div class="value">-->
            <!--                    <div class="label">电压3</div>-->
            <!--                    <div class="line" id="voltage3"></div>-->
            <!--                    <div class="val">3V</div>-->
            <!--                </div>-->
            <!--                <div class="value">-->
            <!--                    <div class="label">北&nbsp;&nbsp;斗</div>-->
            <!--                    <div class="line" id="db-mode" style="margin: 0; text-align: right"></div>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="row" id="content-pane">
                <div class="value">
                    <div class="label" style="flex: 1">舵机状态</div>
                    <!--<div class="line" style="margin: 0 3px">
                        <input name="rudderAngle" class="small-input" type="number">
                    </div>-->
                    <div class="val" style="width: 45px">
<!--                        <button class="btn btn-circle btn-info" id="angle-btn"><i class="fa fa-send-o"></i></button>-->
                        <span id="rotationMode">未知</span>
                    </div>

                </div>
                <div class="value">
                    <div class="label" style="flex: 1">控制模式</div>
                   <!-- <div class="line" style="margin: 5px 5px;width: 70px">
                        <div class="switch">
                            <input id="switch" type="checkbox"/>
                            <label for="switch"></label>
                        </div>
                    </div>-->
                    <div class="val" style="width: 35px">
                        <span id="controlMode">未知</span>
                    </div>
                </div>
            </div>
        </div>

        <!--        <div class="row lights">-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light"></div>-->
        <!--            <div class="light" title="超时"></div>-->
        <!--            <div class="light" title="超速"></div>-->
        <!--            <div class="light" title="恶意靠近"></div>-->
        <!--        </div>-->

        <div class="row values" id="load-panel" style="height: 200px; display: none; margin-top: 10px">
           <!-- <div id="mse"></div>-->
            <!--            <iframe src="//player.bilibili.com/player.html?aid=273991558&bvid=BV1Lc411F7FD&cid=1210828805&page=1"-->
            <!--                    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>-->

            <!--            <iframe style="width: 100%; height: 100%" src="//player.bilibili.com/player.html?aid=231525106&bvid=BV1o841117AL&cid=1213739055&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->
            <div class="row" style="margin-top: 100px">
                <div class="value">
                    <div class="label" style="flex: 1">大气波导</div>
                    <div class="val" style="width: 35px">
                        <span id="load_atmos">未知</span>
                    </div>
                </div>
                <div class="value">
                    <div class="label" style="flex: 1">测风雷达</div>
                    <div class="val" style="width: 35px">
                        <span id="load_radar">未知</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="value">
                    <div class="label" style="flex: 1">波浪仪</div>
                    <div class="val" style="width: 35px">
                        <span id="load_wave">未知</span>
                    </div>
                </div>
                <div class="value">
                    <div class="label" style="flex: 1">ADCP</div>
                    <div class="val" style="width: 35px">
                        <span id="load_adcp">未知</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="value">
                    <div class="label" style="flex: 1">CTD</div>
                    <div class="val" style="width: 35px">
                        <span id="load_ctd">未知</span>
                    </div>
                </div>
                <div class="value">
                    <div class="label" style="flex: 1">水质传感器</div>
                    <div class="val" style="width: 35px">
                        <span id="load_water_quality">未知</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="value">
                    <div class="label" style="flex: 1">水声通信机</div>
                    <div class="val" style="width: 35px">
                        <span id="load_uac">未知</span>
                    </div>
                </div>
                <div class="value" style="visibility: hidden">
                    <div class="label" style="flex: 1">大气波导</div>
                    <div class="val" style="width: 35px">
                        <span >未知</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="buttons">
            <button class="btn" id="route-btn"><i class="fa fa-map-o"></i> 轨迹</button>
            <button class="btn" id="load-btn"><i class="fa fa-cubes"></i> 载荷</button>
        </div>

    </div>
</div>
<div class="middle container" style="display: none">
    <div class="row">
        <div class="title">
            <i class="fa fa-line-chart"></i>
            <span>轨迹显示、数据查询</span>
        </div>
        <div class="close" onclick="hideMiddle(true)">
            <svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" class="ojlTaq_K" viewBox="0 0 36 36">
                <path d="M22.133 23.776a1.342 1.342 0 101.898-1.898l-4.112-4.113 4.112-4.112a1.342 1.342 0 00-1.898-1.898l-4.112 4.112-4.113-4.112a1.342 1.342 0 10-1.898 1.898l4.113 4.112-4.113 4.113a1.342 1.342 0 001.898 1.898l4.113-4.113 4.112 4.113z"
                      fill="#aaa"></path>
            </svg>
        </div>
    </div>
    <div class="content">
        <iframe src="" style="color-scheme: light " id="iframe"></iframe>
    </div>
</div>
<div id="popup" class="ol-popup">
    <div class="btn-group" role="group" aria-label="...">
        <button id="measure" value='Measure' type="button" class="btn btn-default">测距</button>
        <button id="clear" value='Clear' type="button" class="btn btn-default">清除</button>
        <button id="see-map" value='SeeMap' type="button" class="btn btn-default see-map-show">海图</button>
    </div>
</div>
<div class="boat-info container container-small" style="display: none;">
    <div class="row">
        <div class="title">
            <i class="fa fa-address-card"></i>
            <span class="boat-name">艇xxx</span>基本信息
        </div>
    </div>
    <div class="content">
        <div>设备编号：<span class="boat-code">-</span></div>
        <div>设备经度：<span class="boat-lng">-</span></div>
        <div>设备纬度：<span class="boat-lat">-</span></div>
        <div>通信模式：<span class="boat-bdMode">-</span></div>
        <div>北斗卡号：<span class="boat-card">-</span></div>
        <div>使用年限：<span class="boat-lifeSpan">-</span>年</div>
        <div>所属机构：<span class="boat-dept">-</span></div>
        <div>维护机构：<span class="boat-maintainOrg">-</span></div>
        <div>下水日期：<span class="boat-launchDate">-</span></div>
        <div>更新时间：<span class="boat-updateTime">-</span></div>
        <img class="boat-img" src=""/>
    </div>
</div>

<script th:inline="javascript">
    var layer = layui.layer;
    var alertBitTypeDatas = [[${@dict.getType('sys_alert_bit_type')}]];
    var bdModeTypeDatas = [[${@dict.getType('sys_bd_mode')}]];
    var alertTypeDatas = [[${@dict.getType('sys_alert_type')}]];
    var mapHost = [[${mapHost}]]
</script>
<script type="text/javascript" src="/ajax/libs/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/js/map/window.js"></script>
<script type="text/javascript" src="/js/map/data.js"></script>
<script type="text/javascript" src="/js/map/map-util.js"></script>
<script type="text/javascript" src="/js/map/map.js"></script>
<script type="text/javascript" src="/js/map/clock.js"></script>
<script type="text/javascript" src="/js/map/status.js"></script>

<script type="text/javascript" src="/js/map/ws.js"></script>

<script src="/ajax/libs/xgplayer/3.0.1/dist/index.min.js" charset="utf-8"></script>
<!--<script src="//unpkg.byted-static.com/xgplayer/3.0.1/dist/index.min.js"></script>-->
<script src="/ajax/libs/xgplayer-flv/3.0.1/dist/index.min.js" charset="utf-8"></script>
<script>
    let fullScreen = false

    function showFull() {
        if (fullScreen) {
            exitFullscreen()
        } else {
            var full = document.body;
            launchIntoFullscreen(full);
        }
        fullScreen = !fullScreen
    }

    function launchIntoFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

    //加载地图
    loadMap(sourceUrlList, bounds).then(map => {

        this.map = map;
        //加载波浪艇图标层
        getBoats(() => {
            generateBoatNavUI(boats)
            showBoatFeature(boatPointSource, map, getBoatGeoInfo(getStatusListFromBoats()));
        });
        //单机选中 boat
        map.on('singleclick', singleClickListener);
        //resolution 变更
        map.getView().on('change:resolution', resolutionChangeListener)
        //鼠标悬浮在一个boat点位上
        map.on('pointermove', boatMoveListener);
        map.on("movestart", mapMoveStartListener);
        map.on("moveend", mapMoveEndListener);
    })
</script>
</body>

</html>